<template>
    <div id="dataForm">
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item v-show="false" label="id：" prop="id">
          <el-input v-model="dataForm.id" />
        </el-form-item>
        <el-form-item label="姓名：" prop="username">
          <el-input v-model="dataForm.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-radio-group v-model="dataForm.sex">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电子邮箱：" prop="email">
          <el-input v-model="dataForm.email" placeholder="请输入电子邮箱" />
        </el-form-item>
        <el-form-item label="电话：" prop="phone">
          <el-input v-model="dataForm.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="店铺名称：" prop="shopName">
          <el-input v-model="dataForm.shopName" placeholder="请输入店铺名称" />
        </el-form-item>
        <el-form-item label="店铺地址：" prop="shopAddress">
          <el-input v-model="dataForm.shopAddress" placeholder="请输入店铺名称" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="dataForm.password" autocomplete="new-password" clearable placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item label="确认密码：" prop="checkPassword">
          <el-input v-model="dataForm.checkPassword" autocomplete="new-password" clearable placeholder="请再次输入密码" type="password" />
        </el-form-item>
        <el-form-item prop="isDel" hidden>
          <el-input v-model="dataForm.isDel" />
        </el-form-item>
      </el-form>
      <div align="center" style="margin-top: 50px">
        <el-button @click="handleSave('dataForm')">注册</el-button>
        <el-button @click="back">返回</el-button>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import { getWbeRoot } from '../../api/web-site'

export default {
  name: 'RegisterIndex',

  data () {
    /*
    * 手机号校验
    * */
    const checkPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!this.isCellPhone(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }

    /*
    * 密码校验
    * */
    const checkPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (this.dataForm.password !== value) {
        callback(new Error('两次密码不一致！'))
      } else {
        callback()
      }
    }

    const checkEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请正确填写邮箱'))
      } else {
        if (value !== '') {
          const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
          if (!reg.test(value)) {
            callback(new Error('请输入有效的邮箱'))
          }
        }
        callback()
      }
    }

    return {
      dataForm: {
        id: '',
        username: '',
        sex: '男',
        email: '',
        phone: '',
        shopName: '',
        shopAddress: '',
        password: '',
        checkPassword: '',
        isDel: '0'
      },

      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱地址', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur', required: true }
        ],
        phone: [
          { required: true, validator: checkPhone, trigger: 'blur' }
        ],
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        shopAddress: [
          { required: true, message: '请输入店铺地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          { validator: checkPassword, trigger: 'blur', required: true }
        ]
      }

    }
  },

  methods: {
    /**
     * 注册保存
     */
    handleSave (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post(getWbeRoot() + '/api/register/regist', this.dataForm
          ).then(
            response => {
              if (response.data.code === '200') {
                this.$message({
                  showClose: true,
                  message: response.data.msg,
                  type: 'success'
                })
                this.$router.push('/')
              } else if (response.data.code === '300') {
                this.$message({
                  showClose: true,
                  message: response.data.msg,
                  type: 'warning'
                })
              } else {
                this.$message({
                  showClose: true,
                  message: response.data.msg,
                  type: 'error'
                })
              }
            }
          )
        } else {
          return false
        }
      })
    },

    /**
     * 返回
     */
    back () {
      this.$router.push('/')
    },

    /**
     * 手机号校验
     * @param val
     */
    isCellPhone (val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>

</style>
